<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    
    
</head>
<body>
    <div id="app">
      
   <my-com></my-com>
    <my-bn></my-bn>
    
    </div>
    <hr/>
    <div id="app3">
        <my-cc>111</my-cc>
        <my-com></my-com>
         <my-bn></my-bn>
         </div>
         <template id="bb">
             <h1>不装了我是一个局部组件  <slot></slot></h1>
            
         </template>
    <script>
        // var myContent=

        Vue.component('myCom',Vue.extend({
            template: '<h1>自定义组件!</h1>'
        })
        )
        Vue.component('myBn',{
            template: '<h1>自定义组件!</h1>'
        }
        )
   new Vue({
		el:'#app',
	})
    new Vue({
		el:'#app3',
        components:{
           'my-cc' :{
         template:'#bb'
            }   
        }
	})
    </script>
</body>
</html>